<template>
    <div style="height:100%;">
      <div>
        <div class='content-title'>
          <div class='content-title-child'>平台概况232323</div>
        </div>
        <hr class='content-hr'/>
      </div>
      <div class='categoryClass'>
        <el-row style="margin-top:20px" >
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{padding: '0px',height:'130px'}">
              <div class="grid-content grid-con-1">
                  <i class="el-icon-view grid-con-icon"></i>
                  <div class="grid-cont-right">
                      <div class="grid-num" v-loading="isloading">{{dataForm.allRegisterUser}}/{{dataForm.allUser}}</div>
                      <div>累计注册/累计用户</div>
                  </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{padding: '0px',height:'130px'}">
              <div class="grid-content grid-con-2">
                  <i class="el-icon-sort grid-con-icon"></i>
                  <div class="grid-cont-right">
                      <div class="grid-num" v-loading="isloading">{{dataForm.newRegister}}/{{dataForm.newUser}}</div>
                      <div>新增注册/新增用户</div>
                  </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{padding: '0px',height:'130px'}">
              <div class="grid-content grid-con-3">
                  <i class="el-icon-date grid-con-icon"></i>
                  <div class="grid-cont-right">
                      <div class="grid-num" v-loading="isloading">{{dataForm.dayActive}}/{{dataForm.monthActive }}</div>
                      <div>日活跃/月活跃</div>
                  </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top:50px" >
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{padding: '0px',height:'130px'}">
              <div class="grid-content grid-con-4">
                  <i class="el-icon-sold-out grid-con-icon"></i>
                  <div class="grid-cont-right">
                      <div class="grid-num" v-loading="isloading">{{dataForm.dayLost}}</div>
                      <div>新增失物</div>
                  </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{padding: '0px',height:'130px'}">
              <div class="grid-content grid-con-5">
                  <i class="el-icon-goods grid-con-icon"></i>
                  <div class="grid-cont-right">
                      <div class="grid-num" v-loading="isloading">{{dataForm.dayUse}}</div>
                      <div>今日消费</div>
                  </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- <el-col :span="6">
            <el-card shadow="hover" :body-style="{ height: '100px'}">
              <div class='platview-content'>累计注册/累计用户</div>
              </br>
              <span class='platview-number' v-loading="isloading">{{dataForm.allRegisterUser}}/{{dataForm.allUser}}</span>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{ height: '100px' }">
              <div class='platview-content'>新增注册/新增用户</div>
              </br>
              <span class='platview-number' v-loading="isloading">{{dataForm.newRegister}}/{{dataForm.newUser}}</span>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{ height: '100px' }">
              <div class='platview-content'>日活跃/月活跃</div>
              </br>
              <span class='platview-number' v-loading="isloading">{{dataForm.dayActive}}/{{dataForm.monthActive }}</span>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top:30px" >
          <el-col :span="6" :offset="5">
            <el-card shadow="hover" :body-style="{ height: '100px'}">
              <div class='platview-content'>新增失物</div>
              </br>
              <span class='platview-number' v-loading="isloading">{{dataForm.dayLost}}</span>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-card shadow="hover" :body-style="{ height: '100px' }">
              <div class='platview-content'>今日消费</div>
              </br>
              <span class='platview-number' v-loading="isloading">{{dataForm.dayUse}}</span>
            </el-card>
          </el-col> -->
      </div>
    </div>
</template>
<style scoped>
  .platview-number {
    text-align: center;
    vertical-align: middle;
    display: block;
    margin-top: 5px;
    font-size: 25px;
    font-weight: bold;
    color:#408c9e
  }
  .platview-content {
    color: #333333;
    font-weight: bold
  }
    .grid-content {
        display: flex;
        align-items: center;
        height: 130px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 120px;
        height: 130px;
        text-align: center;
        line-height: 130px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }
    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }
    .grid-con-4 .grid-con-icon {
        background: #E6A23C;
    }
    .grid-con-4 .grid-num {
        color: #E6A23C;
    }
    .grid-con-5 .grid-con-icon {
        background: #F56C6C;
    }
    .grid-con-5 .grid-num {
        color: #F56C6C;
    }
    .grid-con-3 .grid-num {
        color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }
</style>

<script>
import '../../../static/css/businessPlat/categoryMana.css'
import '../../../static/css/businessPlat/common.css'
import apiBus from '../../api/businessPlat/apiBus.js'
export default {
  created () {
  },
  mounted () {
    this.tableWidth = document.body.scrollWidth - 259 - 20
    this.getPlatViewFro()
  },
  data () {
    return {
      isloading: true, // 加载
      dataForm: { // 服务器相关数据表单
        allRegisterUser: 0,
        allUser: 0,
        newRegister: 0,
        newUser: 0,
        dayActive: 0,
        monthActive: 0,
        dayLost: 0
      },
      tableWidth: '' // 表格宽度
    }
  },
  methods: {
    /** 页面数据处理相关函数 */
    init () {
      this.dataForm.allRegisterUser = 0
      this.dataForm.allUser = 0
      this.dataForm.newRegister = 0
      this.dataForm.newUser = 0
      this.dataForm.dayActive = 0
      this.dataForm.monthActive = 0
      this.dataForm.dayLost = 0
    },
    /** 提交后台相关函数 */
    // 查询平台相关数据
    getPlatViewFro () {
      this.isloading = true
      let para = {
        header: JSON.stringify({
          'token': sessionStorage.getItem('token')
        }),
        body: JSON.stringify({})
      }
      apiBus.getPlatView(para).then(res => {
        this.isloading = false
        if (res.data.body.result === 1000) {
          this.dataForm = res.data.body.content
        } else {
          this.init()
          this.$message.error(res.data.body.resultDesp)
        }
      })
      .catch(error => {
        this.init()
        this.isloading = false
        this.$message.error(error)
      })
    }
  }
}
</script>